<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>计算结果预览</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="robots" content="all,follow">
  <!-- Bootstrap CSS-->
  <link rel="stylesheet" href="../bootstrap-4.6.1-dist/css/bootstrap.min.css">
  <!-- Font Awesome CSS-->
  <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
  <!-- Fontastic Custom icon font-->
  <link rel="stylesheet" href="../css/fontastic.css">
  <!-- Google fonts - Poppins -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
  <!-- theme stylesheet-->
  <link rel="stylesheet" href="../css/style.default.css" id="theme-stylesheet">
  <!-- Custom stylesheet - for your changes-->
  <link rel="stylesheet" href="../css/custom-pwl.css">
  <!-- Favicon-->
  <link rel="shortcut icon" href="../img/logo.ico">
</head>
<body>
<div class="page">
  <div class="content-inner">
    <section class="client">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-header d-flex align-items-center">
                <h3 class="h4">计算结果预览</h3>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-striped table-hover table-bordered">
                    <thead class="table-sm text-center">
                    <tr>
                      <th>序号</th>
                      <th>公式</th>
                      <th>结果</th>
                      <th>内容</th>
                    </tr>
                    </thead>
                    <tbody id="result-content">
                    <!-- 结果数据将在这里动态插入 -->
                    </tbody>
                  </table>
                </div>
                <div class="mt-3">
                  <p><strong>计算名称：</strong><span id="calcName"></span></p>
                  <p><strong>计算时间：</strong><span id="calcTime"></span></p>
                </div>
                <div class="mt-3">
                  <button id="saveButton" class="btn btn-primary">保存结果</button>
                  <button id="cancelButton" class="btn btn-secondary">不保存</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

<!-- JavaScript files-->
<script src="../js/jquery-3.6.0.min.js"></script>
<script src="../vendor/popper.js/umd/popper.min.js"></script>
<script src="../bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<script src="../vendor/jquery.cookie/jquery.cookie.js"></script>
<script src="../js/front.js"></script>
<script>
  $(document).ready(function() {
    var result = window.opener.calculationResult;
    displayResult(result);

    $('#saveButton').click(function() {
      saveResult(result);
    });

    $('#cancelButton').click(function() {
      if (confirm("确定不保存结果吗？")) {
        window.close();
      }
    });

    window.onbeforeunload = function() {
      return "计算结果还未保存,确定要关闭吗?";
    };
  });

  function displayResult(result) {
    var tbody = document.getElementById('result-content');
    tbody.innerHTML = ''; // 清空表格

    var index = 1;

    function addResultsToTable(results, formulaName) {
      results.forEach(function(item) {
        var row = document.createElement('tr');

        var cell1 = document.createElement('td');
        cell1.textContent = index++;
        row.appendChild(cell1);

        var cell2 = document.createElement('td');
        cell2.textContent = formulaName;
        row.appendChild(cell2);

        var cell3 = document.createElement('td');
        cell3.textContent = item.result.toFixed(2);
        row.appendChild(cell3);

        var cell4 = document.createElement('td');
        cell4.textContent = item.content;
        row.appendChild(cell4);

        tbody.appendChild(row);
      });
    }

    addResultsToTable(result.formula1Results, '公式一');
    addResultsToTable(result.formula2Results, '公式二');
    addResultsToTable(result.formula3Results, '公式三');

    document.getElementById('calcName').textContent = result.calcName;
    document.getElementById('calcTime').textContent = new Date(result.calculationTime).toLocaleString();
  }

  function saveResult(result) {
    $.ajax({
      url: '/amino/saveCalculation',
      type: 'POST',
      contentType: 'application/json',
      data: JSON.stringify(result),
      success: function(response) {
        alert("结果保存成功");
        window.onbeforeunload = null;
        window.close();
      },
      error: function(error) {
        console.error('Error:', error);
        alert("保存失败");
      }
    });
  }
</script>
</body>
</html>